import * as echarts from '../../pages/ec-canvas/echarts'; //加载echarts图表库
import mqtt from '../../pages/js/mqtt.min.js';//加载mqtt库

//图表初始化数据函数
function setOption() {
  const option = {
    title: {
          text: '24小时土壤湿度曲线',
          left: 'center',
    },
    xAxis: {
      type: 'category',
      min: 0,
      max: 23,
      axisTick: {
        alignWithLabel: true, //刻度线对齐
      },
    },
    yAxis: {
      type: 'value',
      min: -0.1,
      max: 100.1,
      splitNumber: 10,
    },
    series: [
      {
        data: [0, 5, 10, 15, 20, 25, 30,35, 40, 45, 50, 55, 60, 65,69, 74, 77, 80, 83, 86, 90,93,96,100],
        type: 'bar',
        showBackground: true,
        barWidth: '60%',
        backgroundStyle: {
          /*color: 'rgba(248, 248, 248, 0.1)'*/
        }
      }
    ]
  };
  return option;
}

Page({
  //页面的初始数据
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },

  //数据变量初始化
  data: {
    ec: {     
      lazyLoad: true //将图表设置为手动初始化
  },
    temp:0,             //显示温度变量
    humi:0,             //显示湿度变量
    Water_Level:false,   //水位状态标志位
    Device_Status:false, //设备状态标志位
    Shakedown_Test_Switch: false, //调试打印信息总开关
    checked: false,//switch状态
    checked1: false,//switch1状态

    uid:"xxxxxxxxxxxxxxxxxxx",//填写自己的巴法云密钥，
    ledtopic:"LED",     //控制led的主题，mqtt控制台创建
    dhttopic:"Temp",    //传输温湿度的主题，控制台创建
    Data_opic:"Data",
    Water:"Water",

    city:"", //位置名称
    weather:"",//天气情况
    temperature:"",//当前温度
    reporttime:"", //数据发布时间
    winddirection:"",//风向
    windpower:"", //风力大小

   },

   // 图表初始化
   init: function ( Data ) {
    this.ecComponent.init((canvas, width, height, dpr) => {
          // 获取组件的 canvas、width、height 后的回调函数
          // 在这里初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
          });
    
          chart.setOption(Data);
          // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
          this.chart = chart;
    
          // 注意这里一定要返回 chart 实例，否则会影响事件处理等
          return chart;
    });
  },

  //查询设备状态
  GET_Online(){
    var that = this
    //请求设备状态,检查设备是否在线
     //api 接口详细说明见巴法云接入文档
    wx.request({
      url: 'https://api.bemfa.com/mqtt/status/', //状态api接口，详见巴法云接入文档
      data: {
        uid: that.data.uid,
        topic: that.data.ledtopic,
      },
      header: {
        'content-type': "application/x-www-form-urlencoded"
      },
      success (res) {

        if(that.data.Shakedown_Test_Switch){console.log(res.data)};

        if(res.data.status === "online"){
          that.setData({
            Device_Status:true
          })
        }else{
          that.setData({
            Device_Status:false
          })
        }
      }
    })    
  },

  //获取温湿度数据
  Get_Data(){
    //获取温湿度值，屏幕初始化时，未订阅收到温湿度时，先去主动获取值
    //api 接口详细说明见巴法云接入文档
    var that = this
    wx.request({
      url: 'https://api.bemfa.com/api/device/v1/data/3/get/', //状态api接口，详见巴法云接入文档
      data: {
        uid: that.data.uid,
        topic: that.data.dhttopic,
        num:1
      },
      header: {
        'content-type': "application/x-www-form-urlencoded"
      },
      success (res) {
        if(that.data.Shakedown_Test_Switch){console.log(res)};
        if("undefined" != typeof res.data.data){//判断是否获取到温湿度
          if(that.data.Shakedown_Test_Switch){console.log(res.data.data[0].msg)};
          if(res.data.data[0].msg.indexOf("#") != -1){//如果数据里包含#号，表示获取的是传感器值，因为单片机上传数据的时候用#号进行了包裹
            //如果有#号就进行字符串分割
            var all_data_arr = res.data.data[0].msg.split("#"); //分割数据，并把分割后的数据放到数组里。
            if(that.data.Shakedown_Test_Switch){console.log(all_data_arr)};//打印数组
            that.setData({ //数据赋值给变量
              temp:all_data_arr[1],//赋值温度
              humi:all_data_arr[2], //赋值湿度
            })
          }
        }

      }
    })    
  },

  //获取历史数据
  Get_Data_Time(){
    //获取温湿度值，屏幕初始化时，未订阅收到温湿度时，先去主动获取值
    //api 接口详细说明见巴法云接入文档
    var that = this
    wx.request({
      url: 'https://api.bemfa.com/api/device/v1/data/3/get/', //状态api接口，详见巴法云接入文档
      data: {
        uid: that.data.uid,
        topic: that.data.Data_opic,
        num:1
      },
      header: {
        'content-type': "application/x-www-form-urlencoded"
      },
      success (res) {
        //console.log(res)
        if("undefined" != typeof res.data.data){//判断是否获取到温湿度
          //console.log(res.data.data[0].msg)
          if(res.data.data[0].msg.indexOf("#") != -1){//如果数据里包含#号，表示获取的是传感器值，因为单片机上传数据的时候用#号进行了包裹
            //如果有#号就进行字符串分割
            var all_data_arr = res.data.data[0].msg.split("#"); //分割数据，并把分割后的数据放到数组里。
            if(that.data.Shakedown_Test_Switch){console.log(all_data_arr)};//打印数组
            
            //字符数组转数字数据组
            all_data_arr.forEach((item,index) =>{
                all_data_arr[index] = parseInt(all_data_arr[index])
              })
        
              all_data_arr.shift() //删除数组开始空数据         
              if(that.data.Shakedown_Test_Switch){console.log(all_data_arr)}; //打印数组     
              that.chart.setOption({series:[{data:all_data_arr}]}) //更新图表
          }
        }
      }
    })    
  },

  //MQTT连接
  MQTT_Connect(){
      var that = this
      //MQTT连接的配置
      var options= {
        keepalive: 60, //60s ，表示心跳间隔
        clean: true, //cleanSession不保持持久会话
        protocolVersion: 4, //MQTT v3.1.1
        clientId:this.data.uid
      }
      //初始化mqtt连接
       this.data.client = mqtt.connect('wxs://bemfa.com:9504/wss',options)
       // 连接mqtt服务器
       this.data.client.on('connect', function () {
        if(that.data.Shakedown_Test_Switch){console.log('连接服务器成功')};
        //订阅温湿度主题
        that.data.client.subscribe(that.data.dhttopic, function (err) {
          if (err) {
            if(that.data.Shakedown_Test_Switch){console.log(err)};
          }
        })
        //订阅开关反馈主题
        that.data.client.subscribe(that.data.Water, function (err) {
          if (err) {
            if(that.data.Shakedown_Test_Switch){console.log(err)};
          }
        })
      })
  
       //MQTT接收消息处理
       that.data.client.on('message', function (topic, message) {
        if(that.data.Shakedown_Test_Switch){console.log(topic)};
          var  msg = message.toString()

          //温度，湿度，水位状态，主题的消息处理
          if(topic == that.data.dhttopic){
            //假设上传的数据为#23#45#off，其中温度是23，湿度45，led为关闭状态
            if(msg.indexOf("#") != -1){//如果数据里包含#号，表示获取的是传感器值，因为单片机上传数据的时候用#号进行了包裹
              //如果有#号就进行字符串分割
              var all_data_arr = msg.split("#"); //分割数据，并把分割后的数据放到数组里。
              if(that.data.Shakedown_Test_Switch){console.log(all_data_arr)};//打印数组
              if(all_data_arr[3] != undefined){//判断是否上传了led状态
                    if(all_data_arr[3] == "ON"){//如果单片机处于打开状态
                        that.setData({ //数据赋值给变量
                          Water_Level:true
                        })
                    }else{
                      that.setData({ //数据赋值给变量
                        Water_Level:false,
                      })
                    }
              }
              //按钮关闭判断
              if(all_data_arr[4] != undefined){//判断是否上传了led状态
                if(all_data_arr[4] == "OFF"){//如果单片机处于打开状态
                    that.setData({ //数据赋值给变量
                      checked: false,
                    })
                }
              }

              //更新显示温湿度数据
              that.setData({ //数据赋值给变量
                temp:all_data_arr[1],//赋值温度
                humi:all_data_arr[2], //赋值湿度
              })
            }
          }
          //手动按钮状态返回消息处理主题
          if(topic == that.data.Water){
            switch(msg){
                case "ON_Message" : that.setData({checked: true});wx.showToast({title: '土壤湿度过低，开始浇水！',icon: 'none',duration: 3500});break;
                case "OFF_Message" : that.setData({checked: false});wx.showToast({title: '土壤湿度正常，无需浇水！',icon: 'none',duration: 3500});break;
                case "OFF_Message_Aridity" : that.setData({checked: false});wx.showToast({title: '蓄水箱水位过低，无法完成浇水！',icon: 'none',duration: 5000});break;
                case "OFF_Message_HandClose" : that.setData({checked: false});wx.showToast({title: '手动关闭浇水完毕',icon: 'none',duration: 3500});break;
                case "OFF_Message_AutoClose" : that.setData({checked: false});wx.showToast({title: '土壤湿度恢复正常，浇水完毕！',icon: 'none',duration: 3500});break;
                case "OFF_Message_Close_Water" : that.setData({checked: false});wx.showToast({title: '手动浇水过程中水位过低，无法完成浇水！',icon: 'none',duration: 5000});break;              
            }
          }
          //打印消息
          if(that.data.Shakedown_Test_Switch){console.log('收到消息：'+msg)};
        })
    
        //断线重连
        this.data.client.on("reconnect", function () {
          console.log("重新连接")
        });       
  },

  //获取历史数据
  Get_Data_Time(){
    //获取温湿度值，屏幕初始化时，未订阅收到温湿度时，先去主动获取值
    //api 接口详细说明见巴法云接入文档
    var that = this
    wx.request({
      url: 'https://api.bemfa.com/api/device/v1/data/3/get/', //状态api接口，详见巴法云接入文档
      data: {
        uid: that.data.uid,
        topic: that.data.Data_opic,
        num:1
      },
      header: {
        'content-type': "application/x-www-form-urlencoded"
      },
      success (res) {
        //console.log(res)
        if("undefined" != typeof res.data.data){//判断是否获取到温湿度
          //console.log(res.data.data[0].msg)
          if(res.data.data[0].msg.indexOf("#") != -1){//如果数据里包含#号，表示获取的是传感器值，因为单片机上传数据的时候用#号进行了包裹
            //如果有#号就进行字符串分割
            var all_data_arr = res.data.data[0].msg.split("#"); //分割数据，并把分割后的数据放到数组里。
            if(that.data.Shakedown_Test_Switch){console.log(all_data_arr)};//打印数组
            
            //字符数组转数字数据组
            all_data_arr.forEach((item,index) =>{
                all_data_arr[index] = parseInt(all_data_arr[index])
              })
        
              all_data_arr.shift() //删除数组开始空数据         
              if(that.data.Shakedown_Test_Switch){console.log(all_data_arr)}; //打印数组     
              that.chart.setOption({series:[{data:all_data_arr}]}) //更新图表
          }
        }
      }
    })    
  },
  
  //获取当前位置天气
  Get_Position(){
    var that = this
      wx.request({
        url: 'https://restapi.amap.com/v3/ip?output=json&key=2b1012442e716347351339e4a11d054d', //状态api接口，
        success (res) {
          wx.request({
            url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=2b1012442e716347351339e4a11d054d&city=' + res["data"]["adcode"], //状态api接口，
            success (res) {
              if(that.data.Shakedown_Test_Switch){console.log(res["data"]["lives"][0])};
              that.setData({ //数据赋值给变量
                city:res["data"]["lives"][0]["city"], //位置名称
                weather:res["data"]["lives"][0]["weather"],//天气情况
                temperature:res["data"]["lives"][0]["temperature"],//当前温度
                reporttime:res["data"]["lives"][0]["reporttime"],//天气数据发布时间
                winddirection:res["data"]["lives"][0]["winddirection"],//风向
                windpower:res["data"]["lives"][0]["windpower"], //风力大小
              })  
            }
          })  
        }
      })    
  },

  //控制灯的函数1，小滑块点击后执行的函数
  Switch_Change({ detail }){

    //detail是滑块的值，检查是打开还是关闭，并更换正确图标
    this.setData({ checked: detail});

    //如果是打开操作
     if(detail == true)
     {
        this.data.client.publish(this.data.ledtopic, 'ON');
     }
     else
     {
      this.data.client.publish(this.data.ledtopic, 'OFF');
     }
  },

  //定时任务
  TimeH: function (e) {
    this.GET_Online()     //检获取设备是否在线
    this.Get_Data_Time()  //获取24小时曲线数据
  },

  //监听页面初次渲染时执行
  onLoad: function (options){
    this.ecComponent = this.selectComponent('#mychart-dom-line');// 获取组件
    var timer = setInterval(this.TimeH, 3000, 1) //设置定时器任务
    this.init(setOption()); //初始化曲线组件    
  },

  //监听页面显示
  onShow: function () { 
    //小程序切换到前台时启动MQTT连接 
    this.MQTT_Connect()   //连接MQTT服务器   
    this.Get_Position()   //获取天气信息
    this.Get_Data();      //获取温湿度数据
  },

  //监听页面隐藏
  onHide: function () {

    //小程序切换到后台时关闭MQTT连接
    this.data.client.end()
  },

})